<template>
  <div class="row">
      <Loader v-if="isLoading" text="数据加载中..." background="rgba(0, 0, 0, 0.5)" />
      <div v-for="column in columnList" :key="column._id" class="col-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <img :src="column.avatar &&column.avatar.url" class="rounded-circle border border-line w-25 my-3" :alt="column.title">
                <h5 class="card-title">{{column.title}}</h5>
                <p class="card-text text-left">{{column.description}}</p>
                <a href="#" class="btn btn-outline-primary" @click.prevent="goDetailColumn(column._id)">进入专栏</a>
            </div>
        </div>

      </div>


      
  </div>
</template>

<script lang="ts">
import {computed, defineComponent,PropType} from 'vue'
import {useRouter} from 'vue-router'
import store, {ColumnProps} from '@/store/index'

import Loader from '@/components/Loader/Loader.vue'

export default defineComponent({
    name: 'ColumnList',
    components: {
        Loader
    },
    props: {
        list: {
            type: Array as PropType<ColumnProps[]>,
            required: true
        }
    },
    setup(props) {
        const router = useRouter()
        // props.list[0].id
      
        const goDetailColumn = (id:string) => {
            console.log('进入详情',id);
            
            router.push({
                path:'/columnDetail',
                query: {
                    id: id
                }
                // params: {
                //     id: id
                // }
            })
            
        }
        const columnList = computed(() => {
            return props.list.map(column => {
                if (!column.avatar) {
                    column.avatar = require('@/assets/logo.png')
                }
                return column
            })
        })
        const isLoading = computed(()=>store.state.isLoding)
        return {
            columnList,
            goDetailColumn,
            isLoading
        }
    }
})
</script>

<style>

</style>